<template>
  <div class="demo-index">
    <div class="status-sum-box">
      <ep-row :gutter="7">
        <ep-col :col="4" v-for="(item, index) in statusList" :key="index">
          <div class="dashbord">
            <div class="num-box" :style="{ color: item.color }">
              <i :class="item.icon"></i>
              <span>{{ item.num }}</span>
            </div>
            <div class="text-box">
              {{ item.status }}
            </div>
          </div>
        </ep-col>
      </ep-row>
    </div>
    <div class="search-box">
      <div class="label-box">
        <ep-row>
          <ep-col :col="1">
            <div class="label">标签：</div>
          </ep-col>
          <ep-col :col="23">
            <ep-row class="label-list">
              <ep-col :col="2" v-for="(item, index) in labelList" :key="index">
                <span @click="activeIndex = index" class="label-item" :class="{ 'label-item-active': index === activeIndex }">
                  {{ item.label }}
                </span>
              </ep-col>
            </ep-row>
          </ep-col>
        </ep-row>
      </div>
      <ep-divider style="margin: 14px 0" />
      <div class="search-item-box">
        <ep-row :gutter="7">
          <ep-col :col="4">
            <ep-select placeholder="请选择状态" v-model="status">
              <ep-select-item v-for="(item, index) in statusList" :key="index" :index="item.index" :label="item.status"></ep-select-item>
            </ep-select>
          </ep-col>
        </ep-row>
      </div>
    </div>
    <div class="sort-box">
      <ep-row>
        <ep-col :col="1">
          <div class="label">排序：</div>
        </ep-col>
        <ep-col :col="23">
          <ep-row>
            <ep-col :col="2" v-for="(item, index) in sortList" :key="index">
              <div class="sort-item" :class="{ 'sort-item-active': index === sortActiveIndex }" @click="sortHandle(item, index)">
                {{ item.name }} <i :class="iconStyle(item)"></i>
              </div>
            </ep-col>
          </ep-row>
        </ep-col>
      </ep-row>
    </div>
    <div class="result-box">
      <div class="result-item-box" v-for="(item, index) in 5" :key="index">
        <result-item />
      </div>
    </div>
    <div class="pagination-box">
      <ep-pager :total-num="total" right></ep-pager>
    </div>
  </div>
</template>

<script>
import { statusList, labelList } from './data'
import resultItem from './result-item.vue'
export default {
  components: {
    resultItem
  },
  data() {
    return {
      statusList,
      labelList,
      sortList: [
        {
          name: '申请时间',
          index: 'time',
          sortType: 'asce'
        },
        {
          name: '优先等级',
          index: 'level',
          sortType: 'asce'
        }
      ],
      activeIndex: 0,
      sortActiveIndex: 0,
      status: '',
      dateVal: '',
      total: 100
    }
  },

  methods: {
    sortHandle(item, index) {
      console.log(item)
      this.sortActiveIndex = index
      if (item.sortType === 'desc') {
        item.sortType = 'asce'
      } else {
        item.sortType = 'desc'
      }
    },
    iconStyle(item) {
      return item.sortType === 'asce' ? 'ion-ios-arrow-thin-down' : 'ion-ios-arrow-thin-up'
    }
  }
}
</script>

<style lang="less" scoped>
@bgfff: #fff;
@bxShadow: 0 0 2px 0 rgb(0 0 0 / 10%);
.demo-index {
  .status-sum-box {
    .dashbord {
      height: 120px;
      background-color: @bgfff;
      box-shadow: @bxShadow;
      border-radius: 2px;
      border: 1px solid #f1f0f5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .num-box {
        font-size: 33px;
        i {
          margin-right: 10px;
        }
      }
      .text-box {
        color: #5e646f;
        font-size: 14px;
        margin-top: 20px;
      }
    }
  }
  .search-box {
    background-color: @bgfff;
    margin: 20px 7px 0px;
    padding: 10px;
    box-shadow: @bxShadow;
    border-radius: 2px;
    .label-box,
    .search-item-box {
      height: 30px;
      line-height: 30px;
    }
    .label-box {
      .label-list {
        .label-item {
          display: inline-block;
          width: 100px;
          font-size: 14px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s;
          &-active {
            color: #fff;
            background-color: #5386ed;
            border-radius: 8px;
          }
        }
      }
    }
  }
  .sort-box {
    margin: 10px 7px 0px;
    border-radius: 2px;
    // border: 1px solid #adb9ce;
    background-color: #fff;
    padding: 10px;
    font-size: 14px;
    .sort-item {
      cursor: pointer;
      &-active {
        color: #2296f3;
      }
    }
  }
  .result-box {
    margin: 0px 7px;
    .result-item-box {
      margin-bottom: 10px;
    }
  }
  .pagination-box {
    margin-right: 7px;
  }
}
.label {
  color: #2296f3;
  font-size: 16px;
}
</style>
